<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* CSS 样式 */
.learning-module {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.course-header {
  background: linear-gradient(135deg, #2c3e50, #3498db);
  color: white;
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.progress-container {
  margin-top: 1.5rem;
}

.progress-bar {
  height: 12px;
  background: rgba(255,255,255,0.2);
  border-radius: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #4CAF50;
  transition: width 0.5s ease;
}

.course-container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
}

.chapter-list {
  display: grid;
  gap: 1rem;
}

.chapter-item {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: transform 0.3s;
}

.chapter-item:hover {
  transform: translateY(-3px);
}

.study-btn {
  background: #2196F3;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.study-btn.completed {
  background: #4CAF50;
  cursor: default;
}

.study-btn:hover:not(.completed) {
  background: #1976D2;
  box-shadow: 0 4px 12px rgba(33,150,243,0.3);
}

/* 侧边栏样式 */
.course-sidebar {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 12px;
  height: fit-content;
}

.badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.badge {
  text-align: center;
  padding: 1rem;
  border-radius: 8px;
  background: white;
  opacity: 0.3;
}

.badge.unlocked {
  opacity: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .course-container {
    grid-template-columns: 1fr;
  }
  
  .course-sidebar {
    order: -1;
  }
}
/* 搜索框样式 */
.search-box {
  margin-bottom: 2rem;
  position: relative;
  max-width: 600px;
}

.search-box input {
  width: 100%;
  padding: 12px 45px 12px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 30px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="%23999999" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat 98% center;
  background-size: 20px;
}

.search-box input:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
}

.search-box input::placeholder {
  color: #999;
}

/* 搜索结果提示 */
.no-results {
  color: #ff4444;
  margin-top: 1rem;
  display: none;
  padding: 1rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
    </style>
</head>
<body>
    <!-- HTML 结构 -->
<section class="learning-module">
    <div class="course-header">
      <div class="course-info">
        <h1>MS Office编程实战30讲</h1>
        <div class="meta-info">
          <span class="teacher">讲师：王教授（微软认证专家）</span>
          <span class="students">👥 已参与学员：2,345人</span>
          <span class="update">🔄 最近更新：2024-03-25</span>
        </div>
      </div>
      <div class="progress-container">
        <div class="progress-bar">
          <div class="progress-fill" style="width: 30%"></div>
        </div>
        <div class="progress-text">已学完 9/30 讲 (30%)</div>
      </div>
    </div>
    <div class="search-box">
        <input type="text" placeholder="搜索课程内容...">
      </div>
  
    <div class="course-container">
      <div class="course-content">
        <div class="chapter-list">
          <!-- 动态生成的课程章节 -->
          <div class="chapter-item" data-chapter="1">
            <div class="chapter-info">
              <span class="order">01</span>
              <div class="details">
                <h3>Office宏编程基础</h3>
                <div class="meta">
                  <span class="duration">⏱️ 45分钟</span>
                  <span class="type">视频+练习</span>
                </div>
              </div>
            </div>
            <button class="study-btn" onclick="fn()">开始学习</button>
            <script>
              function fn(){
                window.location.href = './video02_last.html';
              }
            </script>
          </div>
          <!-- 更多章节通过JavaScript生成 -->
        </div>
      </div>
  
      <aside class="course-sidebar">
        <div class="stats-card">
          <h3>学习统计</h3>
          <ul class="stats-list">
            <li>✅ 已学章节：<span id="completed">0</span>讲</li>
            <li>⏳ 累计时长：<span id="duration">0</span>分钟</li>
            <li>🎯 最新成就：<span id="achievement">尚未获得</span></li>
          </ul>
        </div>
        
        <div class="achievement-board">
          <h3>成就徽章</h3>
          <div class="badges">
            <div class="badge locked" data-badge="starter">
              <div class="badge-icon">🏁</div>
              <span>初学乍练</span>
            </div>
            <!-- 更多徽章 -->
          </div>
        </div>
      </aside>
    </div>
  </section>
  <script>
    // JavaScript 交互
const courseData = {
  chapters: [
    { title: "Office宏编程基础", duration: 45, completed: false },
    { title: "VBA开发环境搭建", duration: 30, completed: false },
    // 其他28讲数据...
  ],
  progress: {
    completed: 0,
    totalDuration: 0
  }
};

// 初始化课程
function initCourse() {
  const list = document.querySelector('.chapter-list');
  
  courseData.chapters.forEach((chapter, index) => {
    const item = document.createElement('div');
    item.className = 'chapter-item';
    item.innerHTML = `
      <div class="chapter-info">
        <span class="order">${String(index+1).padStart(2, '0')}</span>
        <div class="details">
          <h3>${chapter.title}</h3>
          <div class="meta">
            <span class="duration">⏱️ ${chapter.duration}分钟</span>
            <span class="type">视频+练习</span>
          </div>
        </div>
      </div>
      <button class="study-btn">开始学习</button>
    `;
    
    if(chapter.completed) {
      item.querySelector('button').classList.add('completed');
      item.querySelector('button').textContent = '已完成';
    }
    
    item.querySelector('button').addEventListener('click', () => {
      if(!chapter.completed) {
        completeChapter(index);
      }
    });
    
    list.appendChild(item);
  });
}

// 完成章节
function completeChapter(index) {
  const chapter = courseData.chapters[index];
  chapter.completed = true;
  
  // 更新进度
  courseData.progress.completed++;
  courseData.progress.totalDuration += chapter.duration;
  
  // 保存到localStorage
  localStorage.setItem('courseProgress', JSON.stringify(courseData));
  
  // 更新UI
  updateProgress();
  checkAchievements();
}

// 更新进度显示
function updateProgress() {
  // 进度条
  const progress = (courseData.progress.completed / 30) * 100;
  document.querySelector('.progress-fill').style.width = `${progress}%`;
  document.querySelector('.progress-text').textContent = 
    `已学完 ${courseData.progress.completed}/30 讲 (${Math.round(progress)}%)`;
  
  // 统计信息
  document.getElementById('completed').textContent = courseData.progress.completed;
  document.getElementById('duration').textContent = courseData.progress.totalDuration;
}

// 成就系统
const achievements = {
  5: { name: '初学乍练', badge: 'starter' },
  10: { name: '小有所成', badge: 'intermediate' },
  // 更多成就...
};

function checkAchievements() {
  const count = courseData.progress.completed;
  
  Object.entries(achievements).forEach(([threshold, data]) => {
    if(count >= threshold) {
      const badge = document.querySelector(`[data-badge="${data.badge}"]`);
      badge.classList.add('unlocked');
      badge.classList.remove('locked');
      document.getElementById('achievement').textContent = data.name;
    }
  });
}

// 初始化
document.addEventListener('DOMContentLoaded', () => {
  // 加载保存的进度
  const savedData = localStorage.getItem('courseProgress');
  if(savedData) Object.assign(courseData, JSON.parse(savedData));
  
  initCourse();
  updateProgress();
  checkAchievements();
});
// 课程详情弹窗
function showChapterDetail(index) {
  const chapter = courseData.chapters[index];
  const modal = `
    <div class="chapter-modal">
      <h3>${chapter.title}</h3>
      <p>预计时长：${chapter.duration}分钟</p>
      <div class="action-buttons">
        <button class="start-btn">开始学习</button>
        <button class="note-btn">添加笔记</button>
      </div>
    </div>
  `;
  // 显示模态框逻辑...
}
// 学习记录功能
function saveLearningRecord(index) {
  const record = {
    chapter: index+1,
    timestamp: new Date().toISOString(),
    duration: 0 // 需要计时器支持
  };
  courseData.records.push(record);
}
// 集成学习计时器
let studyTimer;
document.querySelector('.study-btn').addEventListener('click', function() {
  studyTimer = setInterval(() => {
    // 更新学习时长
  }, 1000);
});
// 搜索功能实现
const searchInput = document.querySelector('.search-box input');
const chapterItems = document.querySelectorAll('.chapter-item');
const noResults = document.createElement('div');
noResults.className = 'no-results';
noResults.textContent = '未找到相关课程内容';
document.querySelector('.chapter-list').parentNode.appendChild(noResults);

// 防抖函数
function debounce(func, delay=300) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  }
}

// 搜索逻辑
function performSearch() {
  const searchTerm = searchInput.value.trim().toLowerCase();
  let visibleCount = 0;

  chapterItems.forEach(item => {
    const title = item.querySelector('h3').textContent.toLowerCase();
    const isVisible = title.includes(searchTerm);
    item.style.display = isVisible ? 'flex' : 'none';
    if(isVisible) visibleCount++;
  });

  noResults.style.display = visibleCount === 0 ? 'block' : 'none';
}

// 实时搜索监听
searchInput.addEventListener('input', debounce(performSearch));

// 快捷键支持
document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
    e.preventDefault();
    searchInput.focus();
  }
});

// 清空搜索
document.querySelector('.search-box').addEventListener('click', (e) => {
  if(e.target.classList.contains('search-clear')) {
    searchInput.value = '';
    performSearch();
  }
});
  </script>
    
</body>
</html>